<%@ include file="/WEB-INF/controllers/configuration/includes.jsp"%>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<link rel="stylesheet"
	href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />

<div id="contentsChart">
	<div class="contenedorFiltro" id="filtroNews">
		<form:form id="pagformularioFiltroNews" method="POST"
			action="listNews.do" modelAttribute="dtoDashboard">
			<h1 class="titulo1" id="tituloChart">
				<spring:message code="label.title.graficatweets" />
			</h1>
			<div id="inputDatePicker">

				<div id="inputFrom">
					<label for="from">From: </label> <input type="text" id="from"
						name="from" />
				</div>
				<div id="inputTo">
					<label for="to">to: </label> <input type="text" id="to" name="to" />
				</div>
				<div id="divMostrar">
					<input type="button" onclick="buildChart()" value="Mostrar" />
				</div>
			</div>
		</form:form>
	</div>
	<div id="chartTweets"></div>

</div>

<script>
	var defaultDateFrom = '-4w';
	var defaultDateTo = '0';

	$.ajaxSetup({
		statusCode : {
			403 : function() {
				window.location = '<c:url value="login.do"/>';
			}
		},
		// 	type: 'POST',    
		headers : {
			"cache-control" : "no-cache"
		}
	});

	$(function() {
		$("#from").datepicker({
			defaultDate : defaultDateFrom,
			changeMonth : true,
			numberOfMonths : 1,
			onClose : function(selectedDate) {
				$("#to").datepicker("option", "minDate", selectedDate);
				$("#from").datepicker("option", "setDate", $("#from").val());
			},
		});
		$("#to").datepicker({
			defaultDate : defaultDateTo,
			inline : true,
			changeMonth : true,
			numberOfMonths : 1,
			dateformat : "dd/mm/yy",
			onClose : function(selectedDate) {
				$("#from").datepicker("option", "maxDate", selectedDate);
				$("#to").datepicker("option", "setDate", $("#to").val());
			}
		});
		$('#from').datepicker('setDate', defaultDateFrom);
		$('#to').datepicker('setDate', defaultDateTo);

		// 	    $(".hasDatepicker").on("blur", function(e) { $(this).datepicker("hide"); });
	});

	function buildChart() {

		var selectedFrom = $('#from').datepicker('getDate').getTime();
		var selectedTo = $('#to').datepicker('getDate').getTime();

		$.ajax({
			url : '<c:url value="graficaTweetsAJAX.do"/>',
			type : "POST",
			dataType : "json",
			data : {
				start_date : selectedFrom,
				end_date : selectedTo
			},
			timeout : 400000,
			error : function(request, error) {
				alert('Se ha producido un error.');
			},
			success : successBuildChart
		});
	}

	function successBuildChart(json) {

		Highcharts.setOptions({
			global : {
				useUTC : false
			}
		});

		var lstDTODatoGrafica = json.lstDTODatoGrafica;
		var datos = [];
		if (lstDTODatoGrafica != null) {
			for ( var i = 0; i < lstDTODatoGrafica.length; i++) {
				var dtoDatoGrafica = lstDTODatoGrafica[i];

				datos
						.push([
								(dtoDatoGrafica.dateEnd + dtoDatoGrafica.dateStart) / 2,
								dtoDatoGrafica.numTweets ]);
			}
		}

		$('#chartTweets').highcharts('StockChart', {
			chart : {},
			global : {
				useUTC : false
			},
			credits : {
				enabled : false
			},
			yAxis : {
				min : 0
			},

			scrollbar : {
				enabled : true
			},
			rangeSelector : {
				buttons : [ {
					type : 'hour',
					count : 1,
					text : '10h'
				}, {
					type : 'day',
					count : 1,
					text : '1D'
				}, {
					type : 'all',
					count : 1,
					text : 'All'
				} ],
				selected : 2,
				inputEnabled : false
			},

			series : [{
				name : 'Tweets',
				id : 1,
				data : datos,
				color : 'blue',
				type : 'spline'
			}]
		});

	}
</script>